<!--<template>-->
  <!--<div class="dashboard-container">-->
    <!--<component :is="currentRole"></component>-->
  <!--</div>-->
<!--</template>-->

<!--<script>-->
  <!--import {mapGetters} from 'vuex'-->
  <!--import adminDashboard from './admin'-->

  <!--import Store from '@/store'-->
  <!--import API from '@/api'-->
  <!--import Http from '@/http'-->

  <!--export default {-->
    <!--name: 'dashboard',-->
    <!--components: {adminDashboard},-->
    <!--data() {-->
      <!--return {-->
        <!--currentRole: 'adminDashboard'-->
      <!--}-->
    <!--},-->
    <!--computed: {-->
      <!--...mapGetters([-->
        <!--'roles'-->
      <!--])-->
    <!--},-->
    <!--created() {-->
<!--//      Http.getModel(API.get_company_tips, {}, false).then((json) => {-->
<!--//        if (json.code == 0) {-->
<!--//          Store.commit("SET_MSGTIPS",json.data)-->
<!--//        }-->
<!--//      })-->
    <!--}-->
  <!--}-->
<!--</script>-->
<template>
  <div class="app-container calendar-list-container">
    <div>
      <el-row class="panel-group" :gutter="40">
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">需求数（人）</span></div>
              <div><span class="border-right">{{dataBean.must_num}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">登记数（人）</span></div>
              <div><span class="border-right">{{dataBean.dengji_num}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">录用数（人）</span></div>
              <div><span class="border-right">{{dataBean.luyong_num}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">入职数（人）</span></div>
              <div><span class="border-right">{{dataBean.ruzhi_num}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">离职数（人）</span></div>
              <div><span class="border-right">{{dataBean.lizhi_num}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
          <div class='card-panel'>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="border-bottom"><span class="border-right">空缺数（人）</span></div>
              <div><span class="border-right">{{dataBean.kongque_num}}</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row v-loading="DataLoading" element-loading-text="给我一点时间">
      <div style="width:100%;height:300px;margin:20px 0" id="linechart"></div>
    </el-row>
  </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import DateUtil from '@/utils/dateutil'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword: '',
					log_type: ''
				},
				op_type_list: [{
					data_value: '',
					data_text: '全部类型'
				}].concat(Store.getters.basedata.log_type),
				activeName: 'first',
				dataBean:{},
				chart: null,
				DataLoading:true,
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
			this.loadAllData()
			this.loadMonthData()
		},
		mounted() {
			this.initChart()
			if (this.autoResize) {
				this.__resizeHanlder = Utils.debounce(() => {
					if (this.chart) {
						this.chart.resize()
					}
				}, 100)
				window.addEventListener('resize', this.__resizeHanlder)
			}
		},
		computed: {},
		methods: {
			initChart(){
				var linechart = document.getElementById('linechart');
				this.chart = echarts.init(linechart, 'macarons')
				this.loadMonthData()
			},
			getXList:function(){
				var list= [];
				var date = new Date();
				var i=0;
				while(i<30){
					list.push(DateUtil.dateToStr("MM-dd",date));
					date = DateUtil.dateAdd('d',-1,date);
					i++;
				}
				list.reverse();
				console.log("list:",list);
				return list;
			},
			loadMonthData(){
				var x_list= this.getXList();
				Http.getModel(API.tongjiMonthData, {date_list:x_list.join()}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						var result = json.data;
						function parseXList(x_list,y_list){
							var result = [];
							for(var i=0;i<x_list.length;i++){
								result.push(getObjByDate(x_list[i],y_list));
							}
							return result;
						}
						function getObjByDate(date,y_list){
							for(var j=0;j<y_list.length;j++){
								if(y_list[j].d==date){
									return y_list[j].amount;
								}
							}
							return 0;
						}
						var chart_list= [
							{
								name:'需求数',
								type:'line',
								data: parseXList(x_list,result.list1)
							},
							{
								name:'登记数',
								type:'line',
								data: parseXList(x_list,result.list2)
							},
							{
								name:'录用数',
								type:'line',
								data: parseXList(x_list,result.list3)
							},
							{
								name:'入职数',
								type:'line',
								data: parseXList(x_list,result.list4)
							},
							{
								name:'离职数',
								type:'line',
								data: parseXList(x_list,result.list5)
							},
							{
								name:'空缺数',
								type:'line',
								data: parseXList(x_list,result.list6)
							},
						];
						function renderChart(dataList,myChart){
							var option = {
								tooltip : {
									trigger: 'axis',
									axisPointer : {            // 坐标轴指示器，坐标轴触发有效
										type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								legend: {
									data:['需求数','登记数','录用数','入职数','离职数','空缺数']
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis : [
									{
										type : 'category',
										data : x_list
									}
								],
								yAxis : [
									{
										type : 'value'
									}
								],
								series :dataList
							};
							myChart.setOption(option);
						}
						renderChart(chart_list,this.chart);
						this.DataLoading = false
					}
				})
			},
			tabClick(tab, event) {
				console.log(tab, event);
			},
			loadAllData(){
				Http.getModel(API.tongjiData, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.dataBean = json.data
					}
				})
			},
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_op_log_list, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.list = json.data.list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .panel-group {
    margin-top: 18px;
    .card-panel-col {
      margin-bottom: 32px;
    }
    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      .card-panel-text {
        text-align: center;
      }
      &:hover {
        .card-panel-icon {
          color: #fff;
        }
        .card-panel-text {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }
        .icon-money {
          background: #d4237a;
        }
        .icon-morder {
          background: #f4516c;
        }
        .icon-agent {
          background: #0b988f
        }
      }
      .icon-people {
        color: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
      }
      .icon-money {
        color: #d4237a;
      }
      .icon-morder {
        color: #f4516c;
      }
      .icon-agent {
        color: #0b988f;
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 8px 0 0 8px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        div {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
        .border-bottom {
          border-bottom: 1px dashed #aaa
        }
        .border-right {
          border-right: 1px dashed #aaa
        }
        span {
          display: inline-block;
          line-height: 1.5;
          width: 6em;
          text-align: center;
        }
      }
    }
  }
</style>

